import { ArrowDownIcon, ArrowUpIcon } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Card, CardAction, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";

export function IssueSummary() {
  return (
    <div className="grid auto-rows-min gap-4 md:grid-cols-4">
      <Card className="xl:gap-2 xl:py-4 2xl:gap-6 2xl:py-6">
        <CardHeader className="xl:gap-2 xl:px-4 2xl:gap-3 2xl:px-6">
          <CardDescription className="font-semibold">Test Failed</CardDescription>
          <CardTitle className="text-3xl">15 %</CardTitle>
          <CardDescription className="text-xs">from 2025 last month</CardDescription>
          <CardAction>
            <Badge variant="destructive">
              <ArrowUpIcon />+ 1.3%
            </Badge>
          </CardAction>
        </CardHeader>
      </Card>
      <Card className="xl:gap-2 xl:py-4 2xl:gap-6 2xl:py-6">
        <CardHeader className="xl:gap-2 xl:px-4 2xl:gap-3 2xl:px-6">
          <CardDescription className="font-semibold">Bug</CardDescription>
          <CardTitle className="text-3xl">20 %</CardTitle>
          <CardDescription className="text-xs">from 2025 last month</CardDescription>
          <CardAction>
            <Badge variant="secondary">
              <ArrowDownIcon />- 12%
            </Badge>
          </CardAction>
        </CardHeader>
      </Card>
      <Card className="xl:gap-2 xl:py-4 2xl:gap-6 2xl:py-6">
        <CardHeader className="xl:gap-2 xl:px-4 2xl:gap-3 2xl:px-6">
          <CardDescription className="font-semibold">Script</CardDescription>
          <CardTitle className="text-3xl">25 %</CardTitle>
          <CardDescription className="text-xs">from 2025 last month</CardDescription>
          <CardAction>
            <Badge variant="destructive">
              <ArrowUpIcon />+ 25%
            </Badge>
          </CardAction>
        </CardHeader>
      </Card>
      <Card className="xl:gap-2 xl:py-4 2xl:gap-6 2xl:py-6">
        <CardHeader className="xl:gap-2 xl:px-4 2xl:gap-3 2xl:px-6">
          <CardDescription className="font-semibold">Env</CardDescription>
          <CardTitle className="text-3xl">20 %</CardTitle>
          <CardDescription className="text-xs">from 2025 last month</CardDescription>
          <CardAction>
            <Badge variant="secondary">
              <ArrowDownIcon />- 10%
            </Badge>
          </CardAction>
        </CardHeader>
      </Card>
    </div>
  );
}
